<template>
	<navBar :title="name"/>
	<view>
		<view class="header">
			<image style="width:100%;position: absolute;z-index: -1;" mode="widthFix" :src="cover"></image>
			<view class="desc">
				<text class="name">{{name}}</text>
				<text class="rank">歌手榜{{type==1?"华语":type==2?"欧美":type==3?"韩国":type==4?"日本":"华语"}}地区 No.{{rank}}</text>
				<text class="alias">昵称：{{alias.join(",")}}</text>
			</view>
		</view>
		<view class="detailsView">
			<text class="title">歌手简介</text>
			<view>
				<text :style="isMore?{WebkitLineClamp: 0,height:'auto'}:{WebkitLineClamp: 6,height:'15vh'}"
					class="details">{{details}}</text>
				<text class="showMore" @click="isMore=!isMore">{{isMore?'点击收起':'点击展开'}}</text>
			</view>
		</view>
		<view style="padding: 3vw;">
			<text class="title">热门歌曲</text>
			<songItem v-for="(value,index) in hotSongs" :key="index" :info="value"></songItem>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		reactive,
		ref
	} from "vue";
	import baseUrl from '@/config.js'

	let id = 0

	let name = ref("")
	let cover = ref("")
	let rank = ref("")
	let type = ref("")
	let alias = reactive([])
	let details = ref("")

	let isMore = ref(false)

	let hotSongs = reactive([])

	onLoad((option) => {
		id = option.id
		uni.request({
			url: baseUrl + "/artist/detail",
			data: {
				id: id
			},
			success(res) {
				cover.value = res.data.data.artist.cover
				name.value = res.data.data.artist.name
				rank.value = res.data.data.artist.rank.rank
				type.value = res.data.data.artist.rank.type
				alias.push(...res.data.data.artist.alias)
				details = res.data.data.artist.briefDesc
				// console.log(res.data.data)
			}
		})
		uni.request({
			url: baseUrl + "/artists",
			data: {
				id: id
			},
			success(res) {
				hotSongs.push(...res.data.hotSongs)
				// console.log(res.data)
			}
		})
	})
</script>

<style scoped lang="less">
	.header {
		width: 100%;
		display: flex;
		align-items: flex-end;
		height: 45vh;

		.desc {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 3vw;

			text {
				color: #fff;
			}

			.name {
				line-height: 7vh;
				font-size: 1.5em;
			}

			.rank {
				line-height: 5vh;
			}

			.alias {
				font-size: 0.5em
			}
		}

	}

	.title {
		line-height: 7vh;
		font-size: 1.2em;
		font-weight: bold;
	}

	.detailsView {
		display: flex;
		flex-direction: column;
		padding: 3vw;
		border-bottom: solid 1vh #fafafa;

		.details {
			display: -webkit-box;
			font-size: 0.7em;
			word-break: break-all;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 3vh;
		}

		.showMore {
			display: flex;
			justify-content: center;
			margin: 1vh 0;
		}
	}
</style>
